<template>
  <div class="order-list">
    <Table :columns="column" :data="orders">
      <template slot-scope="{ row }" slot="orderUser">
        <div class="order-user">
          <img :src="row.avatar" class="avatar" v-if="row.avatar" />
          <div class="name">{{row.nickname}}</div>
        </div>
      </template>
      <template slot-scope="{ row }" slot="orderStatus">
        <div>{{row.orderStatus | ORDER_STATUS}}</div>
      </template>
    </Table>
    <div class="page">
      <Page :current="pageNum" :pageSize="pageSize" show-total :total="total" @on-change="handlePageChange" />
    </div>
  </div>
</template>

<script>
import { pageOrders } from '../../api/OrderApi'
import TableExpandPart from './part/TableExpandPart'

export default {
  data () {
    return {
      column: [{
        type: 'expand',
        width: 50,
        render: (h, params) => {
          return h(TableExpandPart, {
            props: {
              row: params.row,
            }
          })
        },
      }, {
        title: '店铺',
        key: 'storeName',
      }, {
        title: '下单人',
        slot: 'orderUser',
      }, {
        title: '金额（元）',
        key: 'actualPrice',
      }, {
        title: '下单时间',
        key: 'createdTime',
      }, {
        title: '订单状态',
        slot: 'orderStatus',
      }],
      orders: [],
      pageNum: 1,
      pageSize: 7,
      total: 0,
    }
  },
  methods: {
    async pageOrders () {
      const resp = await pageOrders(this.pageNum, this.pageSize)
      this.orders = resp.list
      this.total = resp.total
    },
    handlePageChange (page) {
      this.$router.push({
        path: '/order_list',
        query: {
          page,
        },
      }).catch(e => {
        console.log(e)
      })
      this.pageNum = page
      this.pageOrders()
    },
  },
  created () {
    const page = this.$route.query.page
    if (page) {
      this.pageNum = parseInt(page, 10) || 1
    }
    this.pageOrders()
  },
}
</script>

<style lang="scss">
  @import './OrderList.scss';
</style>